<!--头部公共部分-->
{include file="common/header" /}

<div id="wodekehu" class="x-body" class="clear:both;"  style="width: 700px;float: left;">
    <div class="layui-row"
         style="padding-left:20px;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
        <div class="layui-form layui-col-md12 x-so layui-form-pane">
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="名称" autocomplete="off" class="layui-input">
            </div>
            <!--<div class="layui-input-inline">-->
                <!--<select name="type" lay-verify="required" lay-search="">-->
                    <!--<option value="" selected>类型</option>-->
                    <!--{volist name="data[11]" id="v"}-->
                    <!--<option value="{$v.id}">{$v['name']}</option>-->
                    <!--{/volist}-->
                <!--</select>-->
            <!--</div>-->
            <!--<div class="layui-input-inline">-->
                <!--<select name="num" lay-verify="required" lay-search="">-->
                    <!--<option value="" selected>库存数量</option>-->
                    <!--<option value="1">{$v['name']}</option>-->
                    <!--<option value="2">{$v['name']}</option>-->
                    <!--<option value="3">{$v['name']}</option>-->
                <!--</select>-->
            <!--</div>-->
            <div class="layui-input-inline">
                <button class="layui-btn" data-type="reload" id="search">筛选</button>
                <button class="layui-btn layui-btn-normal" id="clear">重置</button>
            </div>
        </div>
    </div>
    <table class="layui-table" id="datalist1" lay-filter="Event1"></table>
</div>
<div style="width: 300px; float: left;">
    <div class="x-nav">
      <span class="layui-breadcrumb">
          <a><cite>已选择：<span style="color: red;">{$count}</span></cite></a>
      </span>
        <a class="layui-btn layui-btn-xs layui-btn-danger" id="del" style="margin-top:7px;float:right;margin-left: 10px;">删除</a>
    </div>
    <table class="layui-table" id="datalist2" lay-filter="Event2"></table>
    <script type="text/html" id="barTable">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <div class="layui-input-block">
        <!--<button class="layui-btn" lay-submit="" lay-filter="add">提交</button>-->
        <a class="layui-btn layui-btn-normal" style="margin-left: 100px;" data-type="cancel">取消</a>
    </div>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
    layui.use(['table', 'element', 'form', 'laydate', 'layer'], function () {
        var table = layui.table,
            laydate = layui.laydate,
            element = layui.element,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //方法级渲染
        var tableIns1 = table.render({
            elem: '#datalist1',
            url: '{:url("Course/goods")}',
            toolbar: 'default', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            totalRow: true ,//开启合计行
            method: 'POST',
            cols: [[
                {type: 'checkbox'},
                {field: 'id', title: '编号',minWidth: 100, align: 'center'},
                {field: 'name', title: '名称',minWidth: 100, align: 'center'},
                {field: 'course_ascription', title: '类型', minWidth: 100, align: 'center'},
                {field: 'campus', title: '单价', minWidth: 100, align: 'center'},
                {field: 'course_type', title: '单位', minWidth: 100, align: 'center'},
                {field: 'course_cate_text', title: '库存', minWidth: 100, align: 'center'},
            ]],
            page: true,
            height: 'full-110',
            done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            }
        });

        //方法级渲染
        var tableIns2 = table.render({
            elem: '#datalist2',
            url: '{:url("Course/goods_wait")}',
            totalRow: true ,//开启合计行
            method: 'POST',
            cols: [[
                {field: 'name', title: '名称',minWidth: 100, align: 'center'},
                {title: '操作', fixed: 'right', width: 100, align: 'center', toolbar: '#barTable'},
            ]],
            page: false,
            height: 'full-120',
            done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            }
        });

        //监听头工具栏事件
        table.on('toolbar(Event1)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    if (data.length === 0) {
                        layer.msg('请至少选择一个');
                        return false;
                    }
                    var checked_ids = [];
                    var file_id= 0;
                    for (let index = 0; index < data.length; index++) {
                        const element = data[index];
                        checked_ids.push(element.id)
                        file_id = element.file_id;
                    }
                    var ids ={"ids":checked_ids.join(',')};
                    console.log(ids);
                    var url = '{:url("Course/add")}';
                    $.post(url,ids,function(response){
                        if(response.code === 0){
                            tableIns2.reload();
                        }else{
                            layer.msg(response.msg);
                        }
                    });
                    break;
                case 'update':
                    layer.msg('暂无开放此功能');
                    break;
                case 'delete':
                    layer.msg('暂无开放此功能');
                    break;
            };
        });

        //搜索项
        $('#search').click(function () {
            var field = {};
            field.type = $('select[name=type] option:selected').val();
            field.num = $('select[name=num] option:selected').val();
            field.name = $('input[name=name]').val();
            console.log(field);
            tableIns1.reload({
                where: field,
                method: 'POST',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
        //清除
        $('#clear').click(function () {
            $('.layui-input-inline').each(function(index,element) {
                $(element).find('input[type=text]').val('');
                $(element).find('select').val('');
            });
            tableIns1.reload({
                where: {
                    'type': '',
                    'name': '',
                    'num': '',
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //监听工具条
        table.on('tool(Event2)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                $.post("{:url('Course/goods_wait_del')}", {id: data.id}, function (result) {
                    if (result.code === 0) {
                        // layer.msg(result.msg, {time: 2000});
                        setTimeout(function () {
                            obj.del(); //删除对应行（tr）的DOM结构
                        }, 2000)
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 2000});
                    }
                }, "json")
            } else if (layEvent === 'add') {
                var url = '{:url("Course/goods_wait_default")}';
                layer.open({
                    type: 2,
                    title: '适用校区',
                    shadeClose: true,
                    shade: 0.5,
                    area: ['50%', '50%'],
                    content: url
                });
            }
        });

        $('#del').click(function () {
            alert(1);
        })
        var $ = layui.$, active = {
            reload: function () {
                window.location.reload();
            }
            , cancel: function () {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }
        };
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
